<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Share Your Way</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link
	href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Font Awesome -->
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"
	rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/bootbox.min.js"></script>

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
@import
	url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css')
	;

#map_canvas {
	width: 100%;
	height: 500px;
	background-color: #CCC;
	border-radius: 5px;
}

.affix-top {
	top: 80px;
}

.affix {
	top: 25px;
	position: fixed;
}

.input-group-addon {
	min-width: 90px;
	text-align: center;
}

#mapCanvas {
	width: 500px;
	height: 400px;
	float: left;
}

#infoPanel {
	float: right;
	margin-left: 10px;
}

#infoPanel div {
	float: right;
	margin-bottom: 5px;
}
</style>
</head>

<body style="background-color: #FFFFFF;">
	<div class="navbar navbar-default navbar-static-top"
		style="height: 55px; background-image: linear-gradient(to bottom, #0080F0, #0065BD); border-bottom-color: #0065BD; padding-bottom: 30px; width: 100%;">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#" style="color: white;"><b>UPC
						Share Your way</b><img src="img/upc.png" width="30" height="30"></a>
			</div>
			<div class="collapse navbar-collapse">

				<ul class="nav navbar-nav">
					<li><a href="#wall-meets" style="color: white;"><b>Meetups</b><i
							class="fa fa-road"></i></a></li>
					<li><a href="#" wicket:id="p0" style="color: white;"><b>Profile </b><i
							class="fa fa-user"></i></a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right" style="padding-right: 35px;">
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown" style="color: white;"><b>Login</b> <b
							class="caret"
							style="border-bottom-color: white; border-top-color: white;"></b></a>
						<div class="dropdown-menu" role="menu" style="padding: 14px;">

							<button wicket:id="signout" type="submit"
								class="btn btn-primary btn-sm pull-right">Sign out</button>
						</div></li>
				</ul>

			</div>
			<!--/.nav-collapse -->
		</div>
	</div>
	<div class="container" style="height: 100%; width: 100%; padding-top: 5px;">
		<div class="row">
			<div class="col-md-1">
				<div class="sidebar-nav" data-spy="affix" data-offset-top="55">
					<ul class="nav nav-pills nav-stacked">
						<li class="col-md-12 active" style="padding-bottom: 15px;"><a wicket:id="p1" href="#"><i class="fa fa-user fa-lg" style="color: #FFFFFF;"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-8 col-xs-12">
				<div class="row" style="width: 100%;">
					<!-- <div class="alert alert-warning alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
							aria-hidden="true">&times;</button>
						<p>
							<strong>Incomplete!</strong>
						</p>
						<p>
							You have to <a href="#"	wicket:id="p2" class="alert-link">complete your profile</a> in order tot start
							creating new meetups.
						</p>
					</div> -->
				</div>
				<div class="row" style="width: 100%;">
					<div class="panel panel-default panel-info">
						<div class="panel-heading" style="padding-right: 50px;">
							<b>Search</b>

						</div>
						<div class="panel-body"
							style="max-height: 200px; overflow-y: auto; overflow-x: hidden;">
							<form wicket:id="searchform">
							<p class="col-md-4" style="padding-top: 3px;">
								<label>Origin: </label> <br> <select class="form-control"
									wicket:id="origin" size="1" style="width: 100%;"></select>
							</p>
							<p class="col-md-4" style="padding-top: 3px;">
								<label>Destination: </label> <br> <select
									class="form-control" wicket:id="destination" size="1"
									style="width: 100%;"></select>
							</p>

							<!-- <input type="submit" value="Search" class="btn btn-primary"/> -->
							<p class="col-md-2" style="padding-top: 25px;">
								<button type="button" wicket:id="search"
									class="btn btn-primary">Search</button>
							</p>
						</form>
						</div>
					</div>
				</div>

				<div class="row" style="width: 100%;">
					<div id="wall-meets" class="panel panel-default panel-info">
						<div class="panel-heading" style="padding-right: 4px;">
							<b>Meetups</b>
						</div>
						<div id="PanelMeets" class="panel-body"
							style="max-height: 350px; overflow-y: auto; overflow-x: hidden;">
							<div wicket:id="PanelMeets"></div>
						</div>
					</div>
				</div>
				<div class="row" style="width: 100%;">
					<div id="map_canvas"></div>
				</div>
				<script type="text/javascript">
				$(document).ready(function() {
					$('.mostrarenelmapa').click(function() {
						var origin = $(this).parent().siblings('.origen').children().text();
						var destination = $(this).parent().siblings('.destino').children().text();
						initializeMeets();
						codeAddress(origin, destination);
					});
				});
				</script>

			</div>

			<div class="col-md-3">
				<div class="panel panel-default panel-info">
					<div class="panel-heading" style="padding-right: 4px;">
						<a href="#" wicket:id="p3"><b>Profile</b></a>
					</div>
					<div class="panel-body">
						<h3 wicket:id="pname">Nom</h3>
						<h4 wicket:id="psurname">Cognom</h4>
					</div>
				</div>
				<div class="panel panel-default panel-info">
					<div class="panel-heading" style="padding-right: 4px;">
						<b>Meetups</b>
					</div>
					<div class="panel-body" id="wall-meets">
						<input id="newmeet" type="submit" class="btn btn-primary"
							data-toggle="modal" data-target="#myModal" value="New meetup!" />
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true"
		style="overflow-y: hidden; overflow-x: hidden;">
		<div class="modal-dialog" style="width: 31%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Create new Meetup</h4>
				</div>
				<form wicket:id="form-newmeet">
					<div class="modal-body">
						<!-- <form class="form-horizontal" role="form"> -->
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Vehicle</span> <select
								class="form-control" wicket:id="tvehicle" size="1"></select>
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Origin </span> <input
								wicket:id="torigin" id="torigin" type="text"
								class="form-control"> <span id="getorigin"
								class="btn btn-primary"
								style="height: 34px; left: 341px; position: absolute; width: 34px;"><i
								class="fa fa-map-marker" /></span>
						</div>
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Destination</span> <input
								wicket:id="tdestination" id="tdestination" type="text"
								class="form-control"> <span id="getdestination"
								class="btn btn-primary"
								style="height: 34px; left: 341px; position: absolute; width: 34px;"><i
								class="fa fa-map-marker" /></span>
						</div>

						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Slots</span> <select
								class="form-control" wicket:id="tslots" id="tslots">
								<option wicket:id="s0">-</option>
								<option wicket:id="s1">1</option>
								<option wicket:id="s2">2</option>
								<option wicket:id="s3">3</option>
								<option wicket:id="s4">4</option>
							</select>
						</div>
						
						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon" style="padding: 2px;">Date</span>
							<span wicket:id="ttime" class="form-control"></span>
						</div>
						
						 
						
<!-- 						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Date</span> <input type="text" wicket:id="ttime" />
						</div> -->
<!-- 						<div class="input-group" style="padding: 7px;">
							<span class="input-group-addon">Time</span> <span wicket:id="ttime"></span> <span
								class="input-group-addon" style="min-width: 30px;"><i
								class="fa fa-clock-o"></i></span>
						</div> -->
					</div>
					<div class="modal-footer">
						<button type="button" wicket:id="savemeet" class="btn btn-primary">Save!</button>
					</div>
				</form>

			</div>

			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	

	<div class="modal fade" id="myModal-map" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true"
		style="overflow-y: hidden; overflow-x: hidden;">
		<div class="modal-dialog" style="width: 57%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Nueva seleccion de
						posicion...</h4>
				</div>
				<div class="modal-body" style="height: 435px">
					<div id="mapCanvas"></div>
					<div></div>
					<div class="row col-md-4 pull-right" style="padding-right: 10px; padding-left: 10px;">
						<div class="panel panel-default panel-info">
							<div class="panel-heading" style="padding-right: 4px;">
								<b>Informacion</b>
							</div>
							<div class="panel-body">
								<b>Estado del marcador:</b>
								<div id="markerStatus">
									<i>Selecciona y arrastra el marcador de posición.</i>
								</div>
								<b>Posicion actual:</b>
								<div id="info"></div>
								<b>Dirección real mas cercana:</b>
								<div id="address"></div>
							</div>
						</div>
					</div>
					<button type="button" id="okposition" class="btn btn-primary"
						style="float: right; margin-bottom: 10px; margin-left: 25px;">Ver!</button>
				</div>
			</div>
		</div>
	</div>
	
	

	<!-- Scripts -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script
		src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

	<!--Google Maps-->

	<script type="text/javascript">
	//AUTOMARKERS DE POSICIONES
	
	var geocoder;
	var map;
	var color = "greencirclemarker.png";

	function initializeMeets() {
		  geocoder = new google.maps.Geocoder();
		  var latlng = new google.maps.LatLng(41.275468,1.986676);
		  var mapOptions = {
		    zoom: 8,
		    center: latlng,
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		  }
		  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
		}

	function codeAddress(originAddress, destinationAddress) {
		var o = null;
		geocodeAddress(originAddress, o);
		var d = null;
		geocodeAddress(destinationAddress, d);
	}

	function geocodeAddress(address, overlay){
		geocoder.geocode( { 'address': address, 'partialmatch': true}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				overlay = new CustomMarker(map.getCenter(), map);
				var iw = new google.maps.InfoWindow({content: address, pixelOffset: new google.maps.Size(5,0)});
				iw.open(map, overlay);
				google.maps.event.addListener(overlay, "click", function() {
					iw.open(map, overlay);
				});
			} else {
				alert('Geocode was not successful for the following reason: ' + status);
			}
		});
	}

	function CustomMarker(latlng,  map) {
		this.latlng_ = latlng;
		this.setMap(map);
	}

	CustomMarker.prototype = new google.maps.OverlayView();

	CustomMarker.prototype.draw = function() {
		var me = this;

		// Check if the div has been created.
		var div = this.div_;
		if (!div) {
			// Create a overlay text DIV
			div = this.div_ = document.createElement('DIV');
			// Create the DIV representing our CustomMarker
			div.style.border = "none";
			div.style.position = "absolute";
			div.style.paddingLeft = "0px";
			div.style.cursor = 'pointer';

			var img = document.createElement("img");
			img.src = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/"+color;
			div.appendChild(img);
			google.maps.event.addDomListener(div, "click", function(event) {
				google.maps.event.trigger(me, "click");
			});

			// Then add the overlay to the DOM
			var panes = this.getPanes();
			panes.overlayImage.appendChild(div);
		}

		// Position the overlay 
		var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
		if (point) {
			div.style.left = point.x + 'px';
			div.style.top = point.y + 'px';
		}
	};

	CustomMarker.prototype.remove = function() {
		// Check if the overlay was on the map and needs to be removed.
		if (this.div_) {
			this.div_.parentNode.removeChild(this.div_);
			this.div_ = null;
		}
	};

	CustomMarker.prototype.getPosition = function() {
		return this.latlng_;
	};

	google.maps.event.addDomListener(window, 'load', initializeMeets);

	</script>

	<script type="text/javascript">
//-----------------------
//-- MODAL DE POSICIÓN --
//-----------------------

click = null;

function cerrarmodal() {
	$('#myModal-map').modal("hide"); 
}

$("#getorigin").click(function (){
	click = $('#torigin');
	$('#myModal-map').modal("show");
	  setTimeout(initialize, 250);
});

$("#getdestination").click(function (){
	click = $('#tdestination');
	$('#myModal-map').modal("show");
	  setTimeout(initialize, 250);
});

$("#okposition").click(function (){
	$('#myModal-map').modal("hide");
	click.val($('#address').text());
	bootbox.alert($('#address').text());
});

//-----------------------
//--- API GOOGLE MAPS ---
//-----------------------

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('No podemos determinar la dirección de esta localización.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(41.275468,1.986676);
  var map2 = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 15,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Punto A',
    map: map2,
    draggable: true
  });
  
  //ACTUALIZAMOS LA INFORMACIÓN DE LA POSICIÓN ACTUAL
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  //TODOS LOS LISTENERS RELACIONADOS CON EL POSICIONAMIENTO DEL MARCADOR
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Moviendo...');
  });
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Moviendo...');
    updateMarkerPosition(marker.getPosition());
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Posicionado');
    geocodePosition(marker.getPosition());
  });
}
</script>


	<!-- Scripts Jorge -->
	<script type="text/javascript"> 
			 
			 function alertas (texto) {
				 
				 bootbox.alert(texto)
				 
			 }
			 
			 
			 function salir () {				 
				 
				 bootbox.confirm("Are you sure?", function(result) {
					  if(result==true){
						  
						  $(location).attr('href',"/project"); 
					  }
					}); 
				 
			 }

			 var URL_BASE="http://localhost:8080/ShareYourWay/rest/meet/";
			 function formToJSON_create() {
				    return JSON.stringify({
				        "vehicle": $('#vehicle').val(),
				        "origin": $('#origin').val() ,  
				        "destination": $('#destination').val()   
				        });
				}
			 function formToJSON_filter() {
				    return JSON.stringify({
				        "vehicle": $('#tvehicle').val(),
				        "origin": $('#torigin').val() ,  
				        "destination": $('#tdestination').val()   
				        });
				}

			 $("#newmeet").click(function (){			
				$('#myModal').modal("show");
				
			/* 	    $.ajax({
				        type:"GET",
				        contentType: 'application/json',
				        cache:false,
				        url:"http://localhost:8080/ShareYourWay/rest",
				        success: function (html) {
				        	
				        	alert("Resultado: "+html);
				        } 
				      });  */	
				});
			 
			   $("#savemeet").click(function (){	 
				    $.ajax({
				        type:"POST",
				        contentType: 'application/json',
				        cache:false,
				        url:"http://localhost:8080/ShareYourWay/rest/meet",	
				        dataType:"json",
				        data:formToJSON_create(),
				        success: function (data, textStatus, jqXHR) {
							
				        	//alert("OK");
				        } 
				      }); 
					$('#myModal').modal("hide");					
				});
			  
			  $("#buscar").click(function (){	
					  
				    $.ajax({
				        type:"GET",
				        contentType: 'application/json',
				        cache:false,
				        url:URL_BASE+'filtermeet?vehicle='+$('#tvehicle').val()+'&origin='+$('#torigin').val()+'&destination='+$('#tdestination').val(),
				       	dataType:"json",
				        data:formToJSON_filter(),
				        success: function (html) {
				        	alert(html);
				        } 
				      }); 
					 
					$('#myModal').modal("hide");	
				});
			</script>

</body>
</html>